<template>
  <view class="container">
    <view class="user-section">
      <view class="bg"></view>
      <view class="user-info-box">
        <view class="portrait-box" @click="gotoPath('/pages/setting/safe/avatar',true)">
          <image class="portrait" :src="userInfo.avatar || '/static/missing-face.png'">
          </image>
        </view>
        <view class="info-box">
          <view v-if="hasLogin" @click="gotoPath('/pages/setting/safe/avatar',true)">
            <text class="username">{{ userInfo.nick_name || '游客' }}</text>
            <text @click.native.stop="gotoPath('/pages/setting/safe/cancel_account',true)" v-if="userInfo.cancel_expire"
                  style="color: #e90808;">（即将注销）
            </text>
          </view>
          <view v-else>
            <text class="username" @click="goToLoginPage()">点击登录</text>

          </view>
        </view>
        <view class="setting">
          <view class="setting-item" @click="gotoPath('/pages/setting/index',false)">
            <u-icon name="setting" size="50"></u-icon>
          </view>
        </view>
      </view>
    </view>
    <view class="order_data">
      <u-grid :col="5">
        <u-grid-item
            v-for="(item, index) in order_data"
            :key="index"
            @click="gotoPath(`/pages/packageA/order/index?type=${item.type}`,true)"
        >
          <u-badge :count="item.value" :offset="[20, 20]"></u-badge>
          <u-icon :name="item.icon||'order'" :size="40" color="#444"></u-icon>
          <view class="grid-text">{{ item.label }}</view>

        </u-grid-item>
      </u-grid>
    </view>


    <view class="menu-container">
      <view class="menu-list">
        <u-cell-group>
          <u-cell-item @click="gotoPath('/pages/packageA/order/index')" title="我的订单" icon="order">
            <u-badge v-show="hasLogin && userInfo.order_count > 0" :count="userInfo.order_count" :absolute="false"
                     slot="right-icon">
            </u-badge>
          </u-cell-item>
          <u-cell-item @click="gotoPath('/pages/packageA/user/center')" title="会员中心" icon="integral" :icon-style="{color:'#edb121'}">

          </u-cell-item>

        </u-cell-group>
        <u-cell-group>
          <u-cell-item @click="gotoPath('/pages/packageA/msg/index')" title="系统消息" icon="bell">
            <u-badge v-show="hasLogin && unreadCount > 0" :count="unreadCount" :absolute="false"
                     slot="right-icon">
            </u-badge>
          </u-cell-item>
          <u-cell-item @click="gotoPath('/pages/packageA/address/index')" title="收货地址" icon="car">

          </u-cell-item>
          <u-cell-item @click="gotoPath('/pages/packageA/coupon/my')" title="优惠券" icon="coupon" :icon-style="{color:'#f00'}">
            <u-badge v-show="hasLogin && userInfo.coupon_count > 0" :count="userInfo.coupon_count" :absolute="false"
                     slot="right-icon">
            </u-badge>
          </u-cell-item>
          <u-cell-item @click="gotoPath('/pages/packageA/collect/index')" title="我的收藏" icon="heart">

          </u-cell-item>
          <u-cell-item @click="gotoPath('/pages/packageA/invoice/index')" title="发票管理" icon="rmb-circle">

          </u-cell-item>
          <u-cell-item @click="gotoPath('/pages/packageA/kefu/index')" title="客服" icon="kefu-ermai">
            <u-badge v-show="hasLogin && userInfo.kefuMsgCount > 0" :count="userInfo.kefuMsgCount" :absolute="false"
                     slot="right-icon">
            </u-badge>
          </u-cell-item>

        </u-cell-group>
      </view>
      <view class="extend-list" v-if="plugins_list.length>0">
        <u-grid :col="3">
          <u-grid-item v-for="(item, index) in plugins_list" :key="index" @click="gotoPath(item.path)">
            <u-icon :name="item.icon" :size="46"></u-icon>
            <view class="grid-text">{{ item.name }}</view>
          </u-grid-item>
        </u-grid>
      </view>
    </view>

  </view>


</template>

<script>
import order_api from "@/common/order_api";

export default {
  components: {},
  data() {
    return {
      order_data: {},
      plugins_list: []
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.user
    },
    unreadCount() {
      return this.$store.getters.unread_count || 0
    }

  },
  methods: {
    getOrderCount() {
      order_api.order_data().then(res => {
        this.order_data = res.data
      })
    },

  },
  onLoad(options) {

  },
  onShow() {
    if (this.hasLogin) {
      this.$store.dispatch('getUserInfo')
      this.getOrderCount()
    }
  }
}
</script>

<style lang="scss" scoped>
@import './user.scss';
</style>

